<script lang="ts" setup>
import {
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElImage,
  ElInput,
  ElSelect,
  ElOption,
  ElPagination,
  ElTable,
  ElTableColumn,
  FormRules,
  FormInstance
} from 'element-plus'
import { compact } from 'lodash'
import { ref, reactive, unref } from 'vue'
import { getMiniTicketsListApi, resolveMiniTicketsApi } from '@/api/mini-ticket'
import { MiniTicket } from '@/api/mini-ticket/types'
import { formatDate } from '@/utils'
import { Search, SearchItem } from '@/components/Search'

const loading = ref(false)
const data = ref<MiniTicket[]>([])
const conditions = reactive({
  dates: '',
  status: 'Pending',
  description: '',
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  order: '-created_at'
})

const dialogVisible = ref(false)
const instance = ref<MiniTicket>(new MiniTicket())
const rules = ref<FormRules>({
  comment: [{ required: true, message: '请输入解决方案', trigger: 'blur' }]
})
const formRef = ref<FormInstance>()

const getMiniTickets = async () => {
  const { data: res } = await getMiniTicketsListApi(conditions)
  for (const row of res.rows) {
    row.images = compact([row.image1, row.image2, row.image3, row.image4])
  }
  data.value = res.rows
  conditions.total = res.count
}

const resolve = async (row: MiniTicket) => {
  instance.value = new MiniTicket(row)
  dialogVisible.value = true
}

const MiniTicketStatus = {
  Pending: '待处理',
  Closed: '已处理'
}

const getStatus = (row: MiniTicket) => {
  return MiniTicketStatus[row.status!] || row.status
}

const onDialogConfirm = async () => {
  const form = unref(formRef)
  form?.validate(async (valid) => {
    if (valid) {
      loading.value = true
      await resolveMiniTicketsApi(instance.value.id!, instance.value)
        .then(() => {
          dialogVisible.value = false
        })
        .finally(() => {
          loading.value = false
        })
      await getMiniTickets()
    }
  })
}

getMiniTickets()

const onImageClick = (url) => {
  window.open(url, '_blank')
}
</script>

<template>
  <Search :model="conditions" @reset="getMiniTickets" @search="getMiniTickets">
    <SearchItem label="查询日期" prop="dates">
      <ElDatePicker
        v-model="conditions.dates"
        end-placeholder="结束日期"
        start-placeholder="开始日期"
        type="daterange"
        value-format="YYYY-MM-DD"
      />
    </SearchItem>

    <SearchItem label="状态" prop="status">
      <ElSelect v-model="conditions.status" clearable placeholder="反馈状态">
        <ElOption label="待处理" value="Pending" />
        <ElOption label="已处理" value="Closed" />
      </ElSelect>
    </SearchItem>

    <SearchItem label="反馈内容" prop="description">
      <ElInput v-model="conditions.description" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <Icon
          class="mr-8px ml-8px cursor-pointer"
          icon="ep:refresh-right"
          @click="getMiniTickets"
        />
      </div>
    </div>
    <ElTable
      :data="data"
      border
      header-cell-class-name="cu-header-cell"
      highlight-current-row
      style="width: 100%; margin-top: 20px"
    >
      <ElTableColumn label="反馈时间" show-overflow-tooltip width="180">
        <template #default="{ row }">
          {{ formatDate(row.created_at, 'YYYY-MM-DD HH:mm:ss') }}
        </template>
      </ElTableColumn>

      <ElTableColumn
        :min-width="180"
        label="反馈内容"
        prop="description"
        show-overflow-tooltip
        width="auto"
      />

      <ElTableColumn label="手机号" prop="mobile" show-overflow-tooltip width="180" />

      <ElTableColumn label="图片" show-overflow-tooltip width="180">
        <template #default="{ row }">
          <ElImage
            v-for="image in row.images"
            :key="image"
            :src="image"
            style="width: 80px; height: 80px"
            @click="onImageClick(image)"
          />
        </template>
      </ElTableColumn>

      <ElTableColumn label="状态" prop="status" show-overflow-tooltip width="80">
        <template #default="{ row }">
          {{ getStatus(row) }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="解决方案" prop="comment" show-overflow-tooltip width="180" />

      <ElTableColumn label="解决人" prop="updater.login_name" show-overflow-tooltip width="180" />

      <ElTableColumn
        align="center"
        header-align="center"
        label="操作"
        show-overflow-tooltip
        width="90"
      >
        <template #default="{ row }">
          <ElButton
            v-hasPermi="'miniprogram:mini-ticket:resolve'"
            link
            type="primary"
            @click="resolve(row)"
          >
            关闭
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <ElPagination
      v-model:current-page="conditions.pageIndex"
      v-model:page-size="conditions.pageSize"
      :background="true"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :total="conditions.total"
      class="mt-10px"
      layout="sizes, prev, pager, next, jumper, ->, total"
      @size-change="getMiniTickets"
      @current-change="getMiniTickets"
    />
  </div>

  <ElDialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    draggable
    title="解决反馈"
    width="500px"
  >
    <ElForm ref="formRef" :model="instance" :rules="rules" label-width="100">
      <ElFormItem label="解决方案" prop="comment">
        <ElInput v-model="instance.comment" :rows="5" maxlength="200" type="textarea" />
      </ElFormItem>
    </ElForm>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="onDialogConfirm">确认</el-button>
      </span>
    </template>
  </ElDialog>
</template>

<style lang="less" scoped>
.tool-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
